<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <!--

            一个form标签对应一个表单
            form标签的常用属性：
                action属性：数据提交给谁处理
                method属性：表单的提交方式，表单允许使用两种提交方式:post与get，其默认值为get
                enctype属性：默认值为:application/x-www-form-urlencoded,文件上传的时候一定改为:multipart/form-data

            大多数表单元素可以使用input来表示
            <input type="表单元素的类型" name="数据的key" id="唯一性标志符" value="默认值"/>
            type的取值：
                input   单行文本框
                    常用属性:
                        name属性,很重要
                        size
                        maxLength:控制用户输入的数据的最大字符串
                        value为当前表单元素设置默认值
                        placeholder提示文字
                        required必填
                        readonly只读，readonly="readonly",可以简写为readonly
                        disabled禁用，disabled="disabled"，可以简写为disabled
                        注意：只读和禁用的区别:readonly是可以提交数据的，而disabled是不能够提交数据的
                password 密码框

                radio单选按钮
                    常用属性:
                        name属性，将多个radio的name的值设置为一样，才能实现单选(互斥)
                        value
                        checked,checked="checked"，设置默认被选中
                checkbox复选框
                    常用属性:
                        name属性
                        value
                        checked,checked="checked"，设置默认被选中

                hidden 隐藏域
                submit 提交按钮：提交表单的数据
                    常用属性:
                        value

                 reset 重置按钮
                    常用属性:
                        value

                button:普通按钮，无任何特殊功能
                    常用属性：
                        value
                image:图像按钮，提交按钮
                    常用属性：
                        src

                file:文件选择器
                    常用属性：
                        name
                        accept：限制上传的文件的格式
                        纯文本
                            text/plain:普通文本
                            text/html:htm文本
                            text/css:css文本
                            text/xxx:xxx文本
                            text/*:所有文本
                            该方式存在浏览器兼容问题
                            火狐可以识别图片,谷歌无法识别图片
                      图片
                            image/jpeg
                            image/png
                            image/gif
                            image/*:所有图片


         -->

        <form action="success.html" method="get" >
            用户名:<input type="text" name="username" size="100" maxlength="4"  placeholder="请输入用户名"  required><br>
            密码: <input type="password" placeholder="请输入密码" name="password"><br>
            性别: <input type="radio" name="sex" value="male">男
            <input type="radio" name="sex" value="female" checked>女
            <br>    
            兴趣: <input type="checkbox" name="hobby" value="chuiniu">吹牛
            <input type="checkbox" name="hobby" value="beauty" checked>看美女
            <input type="checkbox" name="hobby" value="games" checked> 打游戏
            <br>
            头像:
            <input type="file" name="file" accept="text/html,image/png">
            <br>
            <input type="hidden" value="哈哈哈" name="yincang">
            <br>
            <input type="submit" value="提交按钮">
            <input type="reset" value="重置按钮">
            <input type="button" value="普通按钮">
            <input type="image" src="../images/submit.png" style="width:40px;">
        </form>
</body>
</html>